<template>
  <div class="customer-balance-details">
    <a-spin :spinning="loading">
      <a-form :model="formState" autocomplete="off">
        <div class="base-info">
          <div class="title">基础信息</div>
          <a-row :gutter="8">
            <a-col v-for="(item, index) in formItemColumn" :key="index" :span="8">
              <a-form-item v-bind="item" :label-col="{ style: 'width:110px' }" :wrapper-col="{ style: 'calc(100% - 110px)' }">
                <template v-if="item.name === 'shortName'"> {{ formState[item.name] }}</template>
                <template v-else>{{ formState[item.name] }}</template>
              </a-form-item>
            </a-col>
          </a-row>
        </div>
      </a-form>

      <div class="box-info">
        <div class="title">
          <span>应收账单列表</span>
        </div>
        <div class="table-content">
          <vxe-table border show-overflow="title" height="280" :data="formState.billCustomerResList" :scroll-y="{ enabled: true, gt: 30 }">
            <vxe-column type="seq" width="50"></vxe-column>
            <vxe-column field="billNum" title="应收账单号" width="120"></vxe-column>
            <vxe-column field="unChargeOffPrice" title="未核销金额"></vxe-column>
            <vxe-column field="chargeOffPrice" title="已核销金额"></vxe-column>
            <vxe-column field="price" title="账单金额"></vxe-column>
            <vxe-column field="createName" title="出账人"></vxe-column>
            <vxe-column field="createTime" title="出账时间" width="150">
              <template #default="{ row }">
                {{ dayjs(row.createTime).format("YYYY-MM-DD HH:mm:ss") }}
              </template>
            </vxe-column>
            <vxe-column field="state" title="核销状态">
              <template #default="{ row }">
                <span v-if="row.state === 0">未核销</span>
                <span v-if="row.state === 1">部分核销</span>
                <span v-if="row.state === 2">已核销</span>
                <span v-if="row.state === 3">已撤回</span>
              </template>
            </vxe-column>
            <vxe-column field="updateName" title="核销人" width="90"></vxe-column>
            <vxe-column field="updateTime" title="核销时间" width="150">
              <template #default="{ row }">
                {{ dayjs(row.updateTime).format("YYYY-MM-DD HH:mm:ss") }}
              </template>
            </vxe-column>
            <vxe-column field="remark" title="账单备注"></vxe-column>
          </vxe-table>
        </div>
      </div>
    </a-spin>
  </div>
</template>

<script setup lang="ts">
import { formItemColumn } from "./data";
import InitHook from "./composables/initHook";
import dayjs from "dayjs";
import { toRefs, watch } from "vue";
const props = withDefaults(
  defineProps<{
    visible: boolean;
    passData: BusinessWaybill.ListRows;
  }>(),
  {}
);
const { visible, passData } = toRefs(props);
const { formState, init, loading } = InitHook();
init(passData.value.id);
watch(
  () => visible.value,
  (v: boolean) => {
    if (v) init(passData.value.id);
  }
);
</script>
<style lang="stylus" scoped>
.customer-balance-details {
  .title{
      font-weight: 600;
      font-size: 14px;
      padding: 12px;
  }
  .base-info{
      background-color: #fff;
      border-radius: 8px;
      box-shadow: 0px 0px 4px 0px #ccc;
      font-weight: 600;
      .emphasis-item {
        color: #fe8100;
        > :deep(.ant-form-item-label){
          >label{
            color: #fe8100;
          }
        }
      }
      :deep(.ant-form-item){
        margin-bottom: 8px;
      }
  }
  .box-info{
      margin-top: 12px;
      background-color: #fff;
      border-radius: 8px;
      box-shadow: 0px 0px 4px 0px #ccc;
      font-weight: 600;
      .title{
          display: flex;
          justify-content: space-between;
          align-items: center;
      }
      .table-content{
        padding: 0 12px 12px 12px;
      }
  }
}
</style>
